<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS3动画实现旋转立方体</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			html,body{
				height:100%;
			}
			body{
				box-sizing: border-box;
				background-image:url(img/pic-0.jpg);
				border:4px solid blue;
			    border-radius: 20px;
			}
			.box{
				width:1000px;
				height:580px;
				margin:50px auto;
				margin-bottom: 0;
				background-color:rgba(255,0,0,.4);
				border:4px solid red;
				border-radius: 20px;
				perspective: 1000px;
				perspective-origin: center center 150px;
			}
			.box ul{
				width:300px;
				height:300px;
				left:0;
				top:120px;
				right:0;
				bottom:0;
				margin:auto;
				position: relative;
				transform-style: preserve-3d;
				animation: move 6s infinite linear;
			}
			.box ul li{
				list-style:none;
				width:300px;
				height:300px;
			    position: absolute;
				font-size:2em;
				text-align:center;
				line-height:300px;
				border:4px solid gray;
			}
			.box ul li:nth-child(1){
				/* background-color:rgba(255,0,0,.3); */
				background-image: url(img/pic-1.jpg);
				background-size: 300px;
				transform: translateZ(150px);
			}
			.box ul li:nth-child(2){
                /*background-color:rgba(255,255,0,.3);*/
	            background-image: url(img/pic-2.jpg);
				background-size: 300px;
			    transform: translateZ(-150px) rotateY(180deg);
			}
			.box ul li:nth-child(3){
				/* background-color:rgba(255,0,255,.3); */
				background-image: url(img/pic-3.jpg);
				background-size: 300px;
				transform: translateX(-150px) rotateY(-90deg);
			}
			.box ul li:nth-child(4){
				/* background-color:rgba(0,255,0,.3); */
				background-image: url(img/pic-4.jpg);
				background-size: 300px;
				transform: translateX(150px) rotateY(90deg);
			}
			.box ul li:nth-child(5){
				/* background-color:rgba(0,255,255,.3); */
				background-image: url(img/pic-5.jpg);
				background-size: 300px;
				transform: translateY(-150px) rotateX(-90deg);
			}
			.box ul li:nth-child(6){
				/* background-color:rgba(0,0,255,.3); */
				background-image: url(img/pic-6.jpg);
				background-size: 300px;
				transform: translateY(150px) rotateX(90deg);
			}
			@keyframes move{
			   from{transform: transform:rotateX(0deg) rotateY(0deg);}
			   to{transform:rotateX(360deg) rotateY(360deg);}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>
